<!-- 列表 -->
<template>
  <div class="list">
    <!-- 列表数据 -->
    <div class="ulist">
      <!-- 列表数据 -->
      <div class="list_data">
        <div class="add">
          <!-- <el-button type="primary" round @click="addlist()">添加公告</el-button> -->
          <div class="search">
            <!-- 添加公告内容 -->
            <div class="s_content">
              <el-input
                type="textarea"
                autosize
                placeholder="请输入用户昵称、微信号、手机号"
                v-model="search_textarea1"
              ></el-input>
            </div>
            <!-- 显示状态 -->
            <div class="s_stort">
              <span class="text">用户状态：</span>
              <el-switch
                v-model="search_value"
                active-color="#13ce66"
                active-value="1"
                inactive-value="0"
                active-text="已启用"
                inactive-text="已禁用"
              ></el-switch>
            </div>
            <!-- 显示状态 -->
            <div class="s_stort">
              <span class="text">用户身份：</span>
              <el-switch
                v-model="content_value"
                active-color="#13ce66"
                active-value="1"
                inactive-value="0"
                active-text="直播用户"
                inactive-text="普通用户"
              ></el-switch>
            </div>
            <el-button type="primary" round @click="search_list()"
              >搜索</el-button
            >
            <el-button type="success" round @click="q_list()"
              >全部列表</el-button
            >
          </div>
        </div>
        <table-list
          :tableData="tableData"
          :listHeader="listHeader"
          @operate="operate"
          :type="type"
        ></table-list>
        <!-- 分页 -->
        <div class="paging">
          <paging-list @Listdata="getChilddptwo" :addNum="addNum"></paging-list>
        </div>
      </div>
    </div>

    <!-- 弹出详情 -->
    <el-dialog title="角色详情" :visible.sync="dialogTableVisible">
      <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称">
          <el-input v-model="ruleForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
            :data="ment_list"
            default-expand-all
            :default-expanded-keys="show_list"
            :default-checked-keys="show_list"
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            show-checkbox
          ></el-tree>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 弹出修改 -->
    <el-dialog title="编辑列表" :visible.sync="dialogTableVisibles">
      <!-- 添加公告内容 -->
      <div class="content">
        <span class="text">昵称：</span>
        <el-input
          type="text"
          autosize
          v-model="vipdata.nickName"
          disabled
        ></el-input>
      </div>
      <div class="content">
        <span class="text">微信号：</span>
        <el-input
          type="text"
          autosize
          v-model="vipdata.Wechat"
          disabled
        ></el-input>
      </div>
      <div class="content">
        <span class="text">手机号：</span>
        <el-input
          type="text"
          autosize
          v-model="vipdata.bindmobile"
          disabled
        ></el-input>
      </div>
      <div class="content">
        <span class="text">余额：</span>
        <el-input
          type="text"
          autosize
          v-model="vipdata.account_money"
          disabled
        ></el-input>
      </div>
      <!-- 显示状态 -->
      <div class="content">
        <span class="text">会员状态：</span>
        <el-switch
          v-model="value"
          active-color="#13ce66"
          active-value="1"
          inactive-value="0"
          active-text="已启用"
          inactive-text="已禁用"
          @change="change"
        ></el-switch>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableList from "../../components/List/TableList";
import PagingList from "../../components/List/PagingList";
export default {
  data() {
    return {
      placeholder: "请输入手机号", //input框中的placehould
      content: "", //input收入值
      //   value: "", //单时间日期
      Bnumber: 10, //每页条数
      Pnumber: 1, //当前页数
      addNum: 0, //总共多少条数
      selectname: "", //下拉列表内容
      tableData: [], //列表数据
      listHeader: [], //列表的渲染部分
      datas: {}, //列表操作返回的数据
      type: "viplist", //列表类型
      Role_list: [], //可选择角色列表
      show_list: [], //展示列表
      ruleForm: {
        name: ""
      },
      dialogTableVisible: false, //点击展示详情
      dialogTableVisibles: false, //点击修改角色
      ment_list: [], //后台菜单列表
      defaultProps: {
        children: "child",
        label: "name"
      },
      textarea1: "", //公告内容
      value: "", //显示状态
      sort: "", // 
      search_textarea1: "", //搜索内容
      search_value: "", //搜索状态
      content_value: "", //搜索用户身份
      vipdata: {} //详情数据
    };
  },
  components: {
    TableList,
    PagingList
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    let live = this.$route.query.skip_live;
    if (live == "Live") {
      this.content_value = 1 + '';
      this.search_list();
    } else {
      this.userAdminList();
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    let header_name = [
      "微信图像",
      "昵称",
      "会员状态",
      "性别",
      "微信号",
      "手机号",
      "注册时间",
      "修改时间",
      "用户身份",
      "主播状态"
    ]; //列表头部
    let list_content = [
      "avatar",
      "nickName",
      "status",
      "gender",
      "Wechat",
      "bindmobile",
      "create_time",
      "update_time",
      "anchor",
      "anchor_status"
    ]; //列表渲染内容字段
    for (let i = 0; i < header_name.length; i++) {
      let obj = {
        label: header_name[i],
        prop: list_content[i]
      };
      this.listHeader.push(obj);
    }
  },
  methods: {
    //获取分页信息
    getChilddptwo(e) {
      this.Pnumber = e.Pnumber;
      this.Bnumber = e.Bnumber;
    },
    //获取详情
    particulars() {
      this.$api
        .memberInfo({
          token: this.publick.token(),
          id: this.datas.user_id
        })
        .then(res => {
          let data = res.data;
          console.log(data);
          this.textarea1 = data.content;
          this.value = data.status + "";
          this.vipdata = data;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //获取列表操作的数据
    operate(e) {
      this.datas = e;
      if (this.datas.type == "course") {
        //    直播的课程列表
        this.$router.push({
          path: "/vlist",
          query: {
            type: "live",
            user_id: this.datas.user_id
          }
        });
      } else if (this.datas.type == "delect") {
        //加入的课程列表
        this.$router.push({
          path: "/vlist",
          query: {
            type: "add",
            user_id: this.datas.user_id
          }
        });
      } else if (this.datas.type == "amend") {
        // 修改
        this.dialogTableVisibles = true;
        this.particulars();
      }
    },
    userAdminList() {
      //获取公告列表
      this.$api
        .memberList({
          token: this.publick.token(),
          page: this.Pnumber,
          limit: this.Bnumber
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
          this.addNum = res.data.total;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //提交修改
    submitForm() {
      this.$api
        .noticeSave({
          content: this.textarea1,
          is_show: this.value,
          sort: this.sort,
          token: this.publick.token(),
          id: this.datas.id
        })
        .then(res => {
          this.$message({
            type: "success",
            message: res.message
          });
          this.userAdminList();
          this.dialogTableVisibles = false;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //添加列表事件
    addlist() {
      this.$router.push({
        path: "/announcementlistAddList",
        query: {
          // type为1是添加列表
          type: 1
        }
      });
    },
    // 点击搜索列表
    search_list() {
      //获取公告列表
      this.$api
        .memberList({
          token: this.publick.token(),
          page: this.Pnumber,
          limit: this.Bnumber,
          key: this.search_textarea1,
          status: this.search_value,
          is_anchor: this.content_value
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
          this.addNum = res.data.total;
        })
        .catch(res => {
          console.log(res);
        });
    },
    // 点击恢复全部数据
    q_list() {
      this.userAdminList();
    },
    //修改状态
    change() {
      this.$api
        .memberStatus({
          token: this.publick.token(),
          id: this.datas.user_id
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "会员状态修改成功"
          });
          this.userAdminList();
        })
        .catch(res => {
          console.log(res);
        });
    }
  },
  watch: {
    Bnumber(newval) {
      if (newval) {
        this.userAdminList();
      }
    },
    Pnumber(newval) {
      if (newval) {
        this.userAdminList();
      }
    },
    $route: function() {
      if (this.$route.query.type == "addlist") {
        this.userAdminList();
      }
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.list {
  width: 100%;
  height: 89vh;
  background: #fff;
  overflow: auto;
}
.ulist {
  background: #fff;
  width: 98%;
  margin: auto;
  margin-top: 2.5vh;
}
.screen {
  display: flex;
  height: 8vh;
  justify-content: flex-start;
  align-items: center;
}
.list_data {
  width: 98%;
  margin: auto;
  margin-top: 4vh;
}
.paging {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 4vh;
  padding-bottom: 2vh;
}
.add {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.content {
  width: 95%;
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text {
  font-size: 16px;
  width: 20%;
  text-align: right;
}
.but {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}
.search {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.s_content {
  width: 20%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 10%;
}
.s_stort {
  width: 30%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>